<template>
  <view class="custom-text"
    :style="{
      'background-color': config.backgroundColor,
      'font-weight': config.isFontBold ? 'bold' : '400',
      'color': config.nameColor,
      'font-size': `${config.fontSize}px`,
      'text-align': config.textAlign,
    }">
    <template>
      <view 
        class="text"
        v-for="item in tabbarList"
        :key="item.id"
        @tap="handleClick(item)"
        :style="{
          'padding-top': `${config.paddingTop}px`,
          'padding-right': `${config.paddingRight}px`,
          'padding-bottom': `${config.paddingBottom}px`,
          'padding-left': `${config.paddingLeft}px`,
          'margin-top':`${config.marginTop}px`,
          'margin-right':`${config.marginRight}px`,
          'margin-bottom':`${config.marginBottom}px`,
          'margin-left':`${config.marginLeft}px`,
          'border':`${config.isBorder ? `1px solid ${config.borderColor}` : ''}`
        }">{{item.title}}</view>
    </template>
  </view>
</template>

<script setup>
import { ref, toRefs, onMounted, reactive } from 'vue'
import { getComponentContents } from '@/api/saas-api.js'
import { entranceJumpPage } from '@/utils/util.js'

const props = defineProps({
  tabbarData: { // 组件数据
    type: Object,
    default: () => {}
  }
})
const { tabbarData } = toRefs(props)

let tabbarList = ref([]) // 列表
let config = reactive({
  backgroundColor: '#fff', // 背景颜色
  nameColor: '#000', // 字体颜色
  fontSize: 14, // 字体大小
  paddingTop: '0', // 上边距
  paddingRight: '0', // 右边距
  paddingBottom: '0', // 下边距
  paddingLeft: '0', // 左边距
  textAlign: 'left', // 对其方式 left center right
  isFontBold: false, // 字体加粗
  isBorder:false,
  marginTop:'0',
  marginRight:'0',
  marginBottom:'0',
  marginLeft:'0',
  borderColor:''
})

// ------------------------------ 生命周期
onMounted(() => {
  if(tabbarData.value && tabbarData.value.configMap && tabbarData.value.configMap.content) {
    let config_tmp = tabbarData.value.configMap.content
    config.backgroundColor = config_tmp.backgroundColor || '#fff'
    config.nameColor = config_tmp.nameColor || '#000'
    config.fontSize = config_tmp.fontSize || 14
    config.paddingTop = config_tmp.paddingTop || '0'
    config.paddingRight = config_tmp.paddingRight || '0'
    config.paddingBottom = config_tmp.paddingBottom || '0'
    config.paddingLeft = config_tmp.paddingLeft || '0'
    config.textAlign = config_tmp.textAlign || 'left'
    config.isFontBold = config_tmp.isFontBold

	config.isBorder = config_tmp.isBorder || false
	config.marginTop = config_tmp.marginTop || '0'
	config.marginRight = config_tmp.marginRight || '0'
	config.marginBottom = config_tmp.marginBottom || '0'
	config.marginLeft = config_tmp.marginLeft || '0'
	config.borderColor = config_tmp.borderColor || ''
  }
  getData() // 获取数据
})


// ------------------------------ 方法
// 获取数据
const getData = () => {
  getComponentContents({ componentId: tabbarData.value.id }).then(res => {
    if(res.code == 100000) {
      tabbarList.value = res.data
    }
  })
}
// 跳转
const handleClick = (item) => {
  entranceJumpPage(item)
}


</script>

<style lang="less" scoped>
.custom-text {
  font-weight: bold;
}
</style>